<script setup>
import { defineProps } from 'vue';
import { ElSkeleton, ElSkeletonItem, ElCard, ElEmpty } from 'element-plus';
import ResourceItem from './ResourceItem.vue';

// 接收来自父组件(SearchResource.vue)的数据
const props = defineProps({
  resources: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});
</script>

<template>
  <div class="resource-list-container">
    <el-skeleton :loading="loading" animated :count="8">
      <template #template>
        <!-- 骨架屏的网格布局 -->
        <div class="skeleton-grid">
          <el-card v-for="i in 8" :key="i" shadow="hover" class="skeleton-card">
            <el-skeleton-item variant="image" class="skeleton-image" />
            <div class="skeleton-content">
              <el-skeleton-item variant="h3" style="width: 80%;" />
              <div class="skeleton-meta">
                <el-skeleton-item variant="text" style="width: 60px;" />
                <el-skeleton-item variant="text" style="width: 40px;" />
              </div>
            </div>
          </el-card>
        </div>
      </template>

      <!-- 加载完成 -->
      <template #default>
        <!-- 无数据时：显示空状态提示 -->
        <div v-if="!loading && resources.length === 0" class="empty-state">
          <el-empty description="暂无匹配资源，换个条件试试吧">
            <template #image>
              <img
                  src="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
                  alt="Empty"
                  style="width: 200px; height: 200px;"
              />
            </template>
          </el-empty>
        </div>

        <!-- 有数据时：遍历数组，渲染每一项 -->
        <div v-else class="resource-grid">
          <ResourceItem
              v-for="resource in resources"
              :key="resource.id"
              :resource="resource"
          />
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<style scoped>
.resource-list-container {
  margin-top: 20px;
}

/* 资源网格布局 */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

/* 骨架屏网格 */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.skeleton-card {
  border-radius: 12px;
  overflow: hidden;
}

.skeleton-image {
  width: 100%;
  height: 180px;
}

.skeleton-content {
  padding: 16px;
}

.skeleton-title {
  width: 80%;
  height: 20px;
  margin-bottom: 12px;
}

.skeleton-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.skeleton-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.skeleton-stats {
  display: flex;
  gap: 12px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 80px 40px; /* 增加内边距，使其更居中 */
  background-color: #fff; /* 添加白色背景 */
  border-radius: 8px; /* 添加圆角 */
  border: 1px solid #e4e7ed; /* 添加边框，与筛选器和排序区一致 */
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .resource-grid,
  .skeleton-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .resource-grid,
  .skeleton-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 16px 0;
  }
}

@media (max-width: 480px) {
  .resource-grid,
  .skeleton-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }
}
</style>